<template>
  <div id="Hwrap">
    <div id="city-header" :style="{opacity: opc}" v-show="showH">
      景点详情
      <router-link to="/"><span class="iconfont icon-fanhui"></span></router-link>
    </div>
    <router-link tag="div" to="/" class="back iconfont" v-show="!showH">
      &#xe624;
    </router-link>
  </div>
</template>

<script>
export default {
  name: 'detailheader',
  data () {
    return {
      showH: false,
      opc: 0
    }
  },
  methods: {
    scrollTop () {
      const op = window.document.documentElement.scrollTop / 100
      const opc = op.toFixed(2)
      if (opc >= 0 && opc <= 1) {
        this.opc = opc
      } else if (op > 0) {
        this.opc = 1
      }
      if (this.opc != 0) {
        this.showH = true
      } else {
        this.showH = false
      }
    }
  },
  activated () {
    window.addEventListener('scroll', this.scrollTop)
  },
  deactivated () {
    window.removeEventListener('scroll', this.scrollTop)
  }
}
</script>

<style lang="stylus" scoped>
  @import '~stylee/stylus'
  #Hwrap
    z-index 999
    #city-header
      line-height: 40px;
      width: 100%;
      color #fff
      background-color $bgColor
      text-align center
      position fixed
      z-index 99
      .icon-fanhui
        position absolute
        top: 0;left: 10px;
        color #fff
    .back
      z-index 999
      position absolute
      top: 5px;left: 5px;
      padding: 10px;
      border-radius 50%
      background-color rgba(0,0,0,.6)
      color #fff
</style>
